<template>
    <div id="container"></div>
</template>


<script>
import * as THREE from 'three'
// import path from '../../public/static/texture/texture1.jpg'
// import path1 from '../../public/static/texture/texture2.png'

export default {
    data() {
        return {
            camera: null,
            scene: null,
            renderer: null,
            mesh: null,
        }
    }, 
    mounted() {
        this.init()
        setTimeout(()=>{
            this.animate()
        }, 100)
    },
    methods: {
        init() {
            let container = document.getElementById('container')

            this.camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.01, 1000)
            this.scene = new THREE.Scene()
            this.renderer = new THREE.WebGLRenderer({
                antialias: true
            }) 

            this.camera.position.z = 2
            this.renderer.setSize(container.clientWidth, container.clientHeight)
            this.renderer.setClearColor(0x00ee00, 0.7)
			
            // 加载纹理 https://threejs.org/docs/index.html?q=TextureLoader#api/en/loaders/TextureLoader
            let textureLoader = new THREE.TextureLoader()
            textureLoader.load(require('../../public/static/texture/texture2.png'), (texture) => {
                let material = new THREE.MeshBasicMaterial({
                    map: texture,
                    // color: 0x0000ff
                });
                // 立方体
                // let geo = new THREE.BoxGeometry(0.2, 0.2, 0.2)
                // 圆环 https://threejs.org/docs/index.html?q=geometry#api/en/geometries/TorusGeometry
                let geo = new  THREE.TorusGeometry(0.5, 0.1, 100, 100)
                this.mesh = new THREE.Mesh(geo, material)
                this.mesh.position.z = -1
                this.mesh.rotation.x = 0.7
                this.scene.add(this.mesh)
            })         
          
            container.appendChild(this.renderer.domElement)

        },
        animate() {
            requestAnimationFrame(this.animate)
			// this.mesh.rotation.x += 0.01
			this.mesh.rotation.y += 0.008
            // this.mesh.position.z += 0.001
			this.renderer.render(this.scene, this.camera)
        }
    }
}

</script>


<style scoped>
#container {
    height: 100vh;
}
</style>